<template>
    <div class="productProNew">
        <div class="title"><h1><span>派团</span></h1></div>
        <form name="newContent" class="basicInfor">
          <div class="form-group required">
            <label>出团通知书附件：</label>
            <div class="Import MemberBtn">
              <input type="file" @change="noticeImport($event)" />
              <span>导入</span>
              <span class="g-tips import-tip">可导入excel、word、pdf文件或图片</span>
              <div class="files-container" v-if="tuanFileImg.length">
                <div class="file-imgs" v-for="(val, index) in tuanFileImg">
                  <img :src="val" alt="" />
                  <span class="dele-img-icon" data-type="tuanImgFile" @click="deleFiles($event, val, index)">x</span>
                </div>
              </div>
              <div class="files-container">
                <div class="file-tags" v-for="(val, index) in showTuanFiles">
                  <a :href="val" target="_blank">
                    {{val.name ? val.name : '附件'+(index+1)}}
                  </a>
                  <span class="dele-file-icon" data-type="tuanfiles" @click="deleFiles($event, val, index)">x</span>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group required">
            <label>名单附件：</label>
            <div class="Import MemberBtn">
              <input type="file" @change="nameImport($event)" />
              <span>导入</span>
              <span class="g-tips import-tip">可导入excel、word、pdf文件或图片</span>
              <div class="files-container" v-if="rosterFileImg.length">
                <div class="file-imgs" v-for="(val, index) in rosterFileImg">
                  <img :src="val" alt="" />
                  <span class="dele-img-icon" data-type="rosterImgFile" @click="deleFiles($event, val, index)">x</span>
                </div>
              </div>
              <div class="files-container">
                <div class="file-tags" v-for="(val, index, $event) in showRosterFiles">
                  <a :href="val" target="_blank">
                    {{val.name ? val.name : '附件'+(index+1)}}
                  </a>
                  <span class="dele-file-icon" data-type="rosterFiles" @click="deleFiles($event, val, index)">x</span>
                </div>
              </div>
            </div>
          </div>
            <div class="form-group required">
                <label :for="'taskName'+$attrs.text">任务名称：</label>
                <input autocomplete="off" type="text" class="form-control proName" :id="'taskName'+$attrs.text" placeholder="请输入任务名称" v-model="groupadds.taskName" />
            </div>
            <div class="form-group required">
              <label class="destxt" :for="'guideMobile'+$attrs.text">导游电话：</label>
              <input autocomplete="off" type="number" min="1" class="form-control proName" :id="'guideMobile'+$attrs.text" placeholder="请输入导游电话" required v-model="groupadds.guideMobile" @blur="getPhone(groupadds.guideMobile)"/>
            </div>
            <div class="form-group required">
              <label class="destxt" :for="'guideName'+$attrs.text">导游姓名：</label>
              <input autocomplete="off" type="text" class="form-control proName" :id="'guideName'+$attrs.text" placeholder="请输入导游姓名" required v-model="groupadds.guideName" />
            </div>
            <div class="form-group">
              <label class="destxt" :for="'lxName'+$attrs.text">旅行社名称：</label>
              <input autocomplete="off" type="text" class="form-control proName" :id="'lxName'+$attrs.text" placeholder="请输入旅行社名称" required v-model="groupadds.lxName" />
            </div>
            <div class="form-group">
              <label class="destxt" :for="'remark'+$attrs.text">备注：</label>
              <textarea class="form-control proDes" :id="'remark'+$attrs.text" rows="6" placeholder="请输入备注信息" v-model="groupadds.demo"></textarea>
            </div>
            <button type="button" class="btn btn-info confirmBtn" @click="submitPro()">提交</button>
            <input type="hidden" v-model="fileNames" />
        </form>
    </div>
</template>
<script>
    import datepicker from 'vue-datepicker-simple/datepicker-2.vue'
    export default {
        data(){
            return{
                Http:'',
                groupadds:{
                  taskName:'',
                  guideName: '',
                  guideMobile: '',
                  lxName: '', //旅行社名称
                  demo: '',
                  tuanFile: '',
                  rosterFile: ''
                },
                showTuanUpload: true,
                showRosterFileUpload: true,
                tuanFileImg: [],
                showTuanFiles: [],
                uploadTuanFile: [],
                showRosterFiles: [],
                rosterFileImg: [],
                uploadRosterFile: [],
                fileNames: [],
                nameIndex: -1,
                searchPhoneHttp: '',
                uploadRosterFileName: []
            }
        },
        computed:{
          groupAdd(){//
            return this.$store.state.interface.addGroup;
          },
          searchPhone(){
            return this.$store.state.interface.searchPhone
          }
        },
        components:{
          'date-picker': datepicker
        },
        methods:{
          noticeImport (e) {
            let self = this;
            let file = e.target.files[0];
            let nameStr = '';
            if (file.name) {
               nameStr = file.name.split(".")[0];
               self.uploadRosterFileName.push(nameStr);
            }
            let reader = new FileReader();
            if(!/image\/\w+/.test(file.type)){
              self.showTuanFiles.push(file);
            } else {
              reader.onload = function(e){
                let result = e.target.result;
                if(self.tuanFileImg.indexOf(result) === -1){
                  self.tuanFileImg.push(result);
                } else {
                  layer.msg('图片已存在');
                }
              };
              reader.readAsDataURL(file);
            }
            self.uploadTuanFile.push(file);

            self.groupadds.taskName = self.uploadRosterFileName[self.uploadRosterFileName.length-1] || '';
          },
          nameImport (e) {
            let self = this;
            let file = e.target.files[0];
            let reader = new FileReader();
            if(!/image\/\w+/.test(file.type)){
              self.showRosterFiles.push(file);
            } else {
              reader.onload = function(e){
                let result = e.target.result;
                if(self.rosterFileImg.indexOf(result) === -1){
                  self.rosterFileImg.push(result);
                } else {
                  layer.msg('图片已存在');
                }
              };
              reader.readAsDataURL(file);
            }
            self.uploadRosterFile.push(file);
          },
          deleFiles (e, val, index) {
            let f_type = e.target.dataset.type;
            let self = this;
            layer.confirm('确定删除该附件？', {
              btn: ['确定','取消'] //按钮
            }, function(){
              // 本地图片
              if (typeof val === 'string' && f_type === 'tuanImgFile') {
                self.tuanFileImg.splice(index,1);
              }
              if (typeof val === 'object' && f_type === 'tuanfiles') {
                self.showTuanFiles.splice(index, 1);
                self.uploadTuanFile.splice(index - 1, 1);
              }
              // 本地文件
              if (typeof val === 'string' && f_type === 'rosterImgFile') {
                self.rosterFileImg.splice(index,1);
              }
              if (typeof val === 'object' && f_type === 'rosterFiles') {
                self.showRosterFiles.splice(index, 1);
                self.uploadRosterFile.splice(index - 1, 1);
              }
              $('.layui-layer-shade, .layui-layer').hide();
            }, function(){
              // 取消
            })
          },
          getPhone (phone) {
            let self = this;
            let isMobile = /^(13|14|15|17|18)\d{9}$/;
            if (!isMobile.test(phone)) {
              layer.msg('请填写有效手机号！');
              return false
            }
            let formData = new FormData();
            let isId = 1;
            formData.append('mobilePhone', phone);
            formData.append('isId', isId);
            self.$ajax.post(self.searchPhoneHttp, formData).then(function(res) {
              if (res.data.code === '10000') {
                let result = res.data.result;
                let id = result.customer.id || ''
                if (id) {
                  self.groupadds.guideName = result.customer.name || '';
                  // self.guideradds.gender = result.customer.gender || '';
                }
              }
            })
          },
            submitPro(){ //提交判断是否信息完整
                let self = this;
                let isMobile = /^(13|14|15|17|18)\d{9}$/;
                if (self.uploadTuanFile.length === 0) {
                  layer.msg('请上传出团通知书附件！');
                  return false
                }
                if (self.uploadRosterFile.length === 0) {
                  layer.msg('请上传名单附件！');
                  return false
                }
                if (self.groupadds.taskName === '') {
                  layer.msg('请填写任务名称！');
                  return false
                }
                if (self.groupadds.guideName === '') {
                  layer.msg('请填写导游姓名！');
                  return false
                }
                if (!isMobile.test(self.groupadds.guideMobile)) {
                    layer.msg('请填写11位有效手机号');
                    return false
                }
                let formData =new FormData(); // 基础信息表单数据
                formData.append('taskName', self.groupadds.taskName);
                formData.append('guideName', self.groupadds.guideName);
                formData.append('guideMobile', self.groupadds.guideMobile);
                formData.append('lxName', self.groupadds.lxName);
                formData.append('demo', self.groupadds.demo);
                if (self.uploadTuanFile.length) {
                  for (let item of self.uploadTuanFile) {
                    formData.append('tuanFile[]', item);
                  }
                }
                if (self.uploadRosterFile.length) {
                  for (let item of self.uploadRosterFile) {
                    formData.append('rosterFile[]', item);
                  }
                }

                layer.load(2);

                let config = {
                  headers: {
                    'Content-Type': 'multipart/form-data'
                  }
                };
                self.$ajax.post(self.Http,formData, config).then(function(res) {
                  layer.closeAll('loading');
                  let result = res.data.result || '';
                  if (result.WbPaituan) {
                    self.groupadds = {};
                    self.uploadRosterFile = [];
                    self.uploadTuanFile = [];
                    self.showTuanFiles = [];
                    self.showRosterFiles = [];
                    self.tuanFileImg = [];
                    self.rosterFileImg = [];
                    layer.msg('派团成功！');
                  } else if (res.data.code === '14001' && res.data.message === '导游不存在') {
                    layer.msg(res.data.message + ',请先添加导游！');
                  } else {
                    layer.msg('派团失败！');
                  }
                },function(res) {
                  layer.msg('派团失败！');
                });
            }
        },
        beforeMount(){
          let self = this;
          let url = self.groupAdd;
          let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
          self.Http =`${url}?sid=${sessionId}`;
          self.searchPhoneHttp = `${self.searchPhone}?sid=${sessionId}`;
        },
        mounted(){
          $('.vue-datepicker input').height($('.form-group input').height());
          $('.vue-datepicker input').width($('.form-group input').width());
          $('#acceptTime').attr('disabled', true);
        }
    }
</script>
<style lang="scss" scoped>
    form{
        display:block;
    }
    .title{
        color:#4e5e7e;
    }
  .form-control.like-textarea, .form-control.proDes, .form-group .mainImg{
    width: 70%;
  }
  .g-tips{margin-left:10px;color:#999;}
    .mainImg{
      border: none!important;
    }
  .tuan-file{cursor: pointer;}
    .MemberBtn{
      background: none;
      color: #09ba79;
      font-size: 14px;
      padding-left: 22px;
      background-position: 0 center;
      background-repeat: no-repeat;
      margin: 0 10px;
    }
    .NewMember{
      background-image:url('../../assets/images/search_xinjian_btn2.png');
    }
    .Import{
      display: inline-block;
      position: relative;
      border: none;
      height: 34px;
      padding: 0;
      cursor: pointer;
      background-image:url('../../assets/images/Import2.png');
      input{
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
      span{
        padding: 0 10px 0 22px;
        cursor: pointer;
        color: #09ba79;
        font-size: 14px;
        height: 34px;
        line-height: 34px;
      }
    }
    .deleteBtn{
      background-image:url('../../assets/images/modification2.png');
    }
    .modificationBtn{
      background-image:url('../../assets/images/delete2.png');
    }
    .import-tip.import-tip{margin-left: 105px;margin-top: 6px;padding-top: 6px;color: #999;font-size: 12px;}
    .file-tags{
      display: inline-block;
      background: #09ba79;
      color: #fff;
      padding: 4px 10px;margin-right: 6px;
      position: relative;
    }
    span.dele-file-icon, span.dele-img-icon{
      position: absolute;
      background: rgba(0,0,0,0.5);color: #fff;
      width: 18px;height: 18px;padding: 0;line-height: 18px;
      top: -8px;right: -8px;text-align: center;
      border-radius: 50%;
      /*visibility: hidden;*/
    }
    .file-imgs{
      position: relative;
      display: inline-block;
      width: 120px;height: 80px;
      border-radius: 6px;border: 1px solid #eee;
      margin-bottom: 20px;margin-right: 10px;
    }
    .file-imgs img{display: block;width: 100%;height: 100%;}
    .vue-datepicker{
      display: inline-block;
      background: #fff url(…DNJT/s4H4Eksi+pihmgTHw6f270WQ8atyocaPG0dc4gAADAALLNkNyjdPhAAAAAElFTkSuQmCC) no-repeat scroll right center;
      padding-right: 35px;
    }
    .form-group > label{width: 110px;}
    .form-group .form-control{width: 400px;}
</style>
